<template>
  <div class="home-header" @click="$router.push('/search')">
    <div class="home-header-left">
      <van-icon class-prefix="icon" size="24" class="iconfont" name="fenlei"/>
      <span>分类</span>
    </div>
    <div class="home-header-search">
      <van-icon class-prefix="icon" size="18" class="iconfont" name="search"/>
      <span>搜索xxx商品</span>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
.home-header{
  height: 50px;
  background-color: #f66;
  color:#fff;
  font-size: 14px;
  display: flex;
  padding-right: 10px;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  position: fixed;
  left:0;
  top:0;
  z-index:2;
  &-left{
    padding:0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
 &-search{
   background: rgba(255,255,255,.3);
   flex:1;
   height: 30px;
   border-radius: 15px;
   display: flex;
   align-items: center;
   .iconfont{
     margin:0 8px;
   }
 }
}
</style>
